<template>
	<view class="container">
		<!-- 商家信息 -->
		<view class="card">
			<view class="card_left">
				<img class="card_left_img" :src="BASE_OSS_URL + shopItem.logo" alt="" />
			</view>
			<view class="card_right">
				<view class="card_right_top">
					<view>
						<view class="card_title">{{shopItem.name}}</view>
						<view class="card_info">销量 <text>{{saleTotal}}</text> 丨
							<text>{{shopItem.address_detail}}</text> 距你
							<text>{{Number(shopItem.distance).toFixed((2))||0}}m</text>
						</view>
					</view>
					<view class="card_navigation">
						<image src="@/static/index/daohan.png" />
						<view>导航</view>
					</view>
				</view>
				<view class="card_detail" v-for="good in shopItem.goods" :key="good.id">
					<view class="card_detail_title">
						【新店开业】{{good.name}}
					</view>
					<view class="card_detail_content">
						<view class="card_price">¥{{good.price}}</view>
						<view class="card_sale">已售{{good.sales}}</view>
					</view>
				</view>
				<view class="card_more" @click="toDetail(shopItem.id)">查看更多商品 ></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		BASE_OSS_URL
	} from '@/utils/request';
	import {
		computed
	} from 'vue';
	const props = defineProps({
		shopItem: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const saleTotal = props.shopItem.goods.reduce((total, item) => {
		console.log(total);
		return total += item.sales
	}, 0)
	
	// 页面跳转商家页面
	const toDetail = (id) => {
		uni.navigateTo({
			url: `/pages/business/index/index?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(90deg, #012148, #011434);
		padding: 0 28rpx;
		min-height: 100%;

		.card {
			display: flex;
			padding: 22rpx 16rpx 28rpx 20rpx;
			background: #112959;
			box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0, 14, 41, 0.3);
			border-radius: 20rpx;
			margin-top: 22rpx;

			.card_left {
				width: 100rpx;
				height: 100rpx;

				.card_left_img {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.card_right {
				margin-left: 18rpx;
				flex: 1;

				.card_right_top {
					display: flex;
					margin-bottom: 4rpx;
					justify-content: space-between;

					.card_title {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #00C1FF;
					}

					.card_info {
						font-family: FZLanTingHeiS-R-GB;
						font-weight: 400;
						font-size: 22rpx;
						color: #3A75C0;
						margin-top: 20rpx;
					}

					.card_navigation {
						text-align: center;

						image {
							width: 52rpx;
							height: 52rpx;
							margin-bottom: 8rpx;
							vertical-align: top;
						}

						font-family: FZLanTingHeiS-R-GB;
						font-weight: 400;
						font-size: 20rpx;
						color: #00C1FF;
					}
				}

				.card_detail {
					margin-top: 36rpx;

					.card_detail_title {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #01B3EE;
					}

					.card_detail_content {
						display: flex;
						justify-content: space-between;
						margin-top: 24rpx;

						.card_price {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #F25C01;
						}

						.card_sale {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #3A75C0;
						}
					}
				}

				.card_more {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #3A75C0;
					line-height: 48rpx;
				}
			}
		}
	}
</style>